<template>
	<view>
		<view class="content1">
			<text >等待商家处理,请耐心等待</text>
			<text >{{pro_info.create_time}}</text>
		</view>
		<block>
		<uni-steps :options="list1" :active="active" style="padding: 20rpx;" />
		<view class="cut-off-rule"></view>
		<view class="content2">
			<view class="name">
				<text>{{user.nickname}}</text><text>{{user.mobile}}</text>
			</view>
			<view class="address">{{pro_info.address}}</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="content3">
			<view class="content3_title">共{{pro.length}}件商品</view>
			<view class="content3_pro" v-for="(item,index) in pro" :key="index">
				<image :src="item.goods_info.image" class="content3_pro_image"></image>
				<view class="content3_center">
					<view class="content3_center_name">{{item.goods_info.title}}</view>
					<!-- <view class="content3_center_spec">规格:黑色</view> -->
					<view class="content3_center_price">￥{{item.goods_info.price}}</view>
				</view>
				<view class="content3_price">
					<!-- <view>￥{{item.goods_info.price}}</view> -->
					<view>x{{item.cart_num}}</view>
				</view>
			</view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="content4">
			<view class="content4_name">订单编号:<text class="content4_info" id="copyobj">{{pro_info.order_no}}
								<view class="content4_copy" @click="copyOrder(pro_info.orderid)">复制</view>
				</text>
				<!-- <view class="content4_copy" @click="copyOrder(pro_info.orderid)">复制</view> -->
				</view>
			<view class="content4_name">下单时间:<text class="content4_info">{{pro_info.create_time}}</text></view>
			<view class="content4_name">支付状态:<text class="content4_info">{{pro_info.status==0?"未支付":pro_info.status==1?"已支付":""}}</text></view>
			<view class="content4_name">支付方式:<text class="content4_info">{{pro_info.pay_type==0?"余额":pro_info.pay_type==1?"微信":pro_info.pay_type==2?"支付宝":""}}</text></view>
		</view>
		<view class="cut-off-rule"></view>
		<view class="content4">
			<view class="content4_name border" style="padding-bottom:20rpx ;">支付金额:<text class="content4_info">￥{{pro_info.pay_price}}</text></view>
			<!-- <view class="content4_name">运费:<text class="content4_info ">￥{{pro_info.distribution_fee}}</text></view> -->
			<view class="content4_ordertotal order">实付款:<text>￥{{pro_info.total_price}}</text></view>
		</view>
		<view class="cut-off-rule"></view>
		</block>
		<view class="emty">
			<view class="order_btn">申请退款</view>
		</view>
	</view>
</template>
<script>
	import uniSteps from "./components/uni-steps.vue"
	import{orderdetail,addresseinfo} from '../../../api/mine.js'
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				active: 1,
				pro: [],
				list1: [{
						title: '待付款'
					}, {
						title: '待发货'
					}, {
						title: '待收货'
					}, {
						title: '待评价'
					},
					{
						title: '己完成'
					}
				],
				pro_info: {
					
				},
				address_info:{},
				user:[]
			}
		},
		async onLoad(point) {
			await orderdetail({
				order_no:point.order_id || '20210830142055PO83091'
			}).then(res=>{
				this.pro_info=res.data
				this.pro=res.data.cart_list
				this.user=res.data.user
			})
		},
		methods: {
			// 获取订单详情
			getorderinfo(){
				
			},
			copyOrder() {
				let orderid = document.querySelector('#copyobj').innerText
				console.log(orderid)
				// orderid.select()
				document.execCommand("copy")
				uni.showToast({ // 显示复制成功之后的提示文本
					title: '复制成功',
					icon: 'none',
					duration: 2000
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content1 {
		background-color: #00C049;
		color: #FFF;
		font-size: 28rpx;
		height: 120rpx;
		padding: 20rpx;
		// margin-left: 50rpx;
		justify-content: center;
		// align-items: center;
		display: flex;
		flex-direction: column;
		text{
			padding: 10rpx 50rpx;
		}
	}

	.content2 {
		padding: 20rpx;

		.name {
			padding: 10rpx;

			text {
				padding: 8rpx;
			}
		}

		.address {
			padding: 10rpx;
			color: #868686;
			font-size: 24rpx;
		}
	}

	.content3 {
		padding: 0rpx 20rpx 20rpx 20rpx;

		.content3_title {
			padding: 20rpx;
			border-bottom: 1rpx solid #F0F0F0;
			font-size: 28rpx;

		}

		.content3_pro {
			width: 100%;
			padding: 20rpx 18rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;

			.content3_pro_image {
				width: 160rpx;
				height: 160rpx;
				display: block;
				flex-shrink: 0;
				border-radius: 10rpx;
			}

			.content3_center {
				flex: 1;
				padding: 20rpx 8rpx;
				box-sizing: border-box;
				margin-left: 20rpx;

				.content3_center_name {
					max-width: 310rpx;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 26rpx;
					line-height: 32rpx;
				}
				.content3_center_price{
					font-size: 24rpx;
					line-height: 32rpx;
					color:#FF911A ;
					padding: 10rpx 10rpx 10rpx 0rpx;
				}

				.content3_center_spec {
					font-size: 22rpx;
					color: #888888;
					line-height: 32rpx;
					padding-top: 20rpx;
					word-break: break-all;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}
			}

			.content3_price {
				text-align: right;
				font-size: 24rpx;
				color: #888888;
				line-height: 30rpx;
				padding-top: 20rpx;
			}


		}
	}

	.content4_ordertotal {
		margin-right: 10rpx;
		text-align: right;
		font-size: 28rpx;
		// color: #888888;
		line-height: 30rpx;
		padding-top: 20rpx;

		text {
			color: #00C049;
			font-weight: 600;
		}
	}

	.content4 {
		padding: 20rpx;

		.content4_name {
			font-size: 28rpx;
			margin: 10rpx;
			padding: 5rpx;
			.content4_info {
				text-align: right;
				font-size: 28rpx;
				color: #868686;
				float: right;
				margin-left: -100rpx;
			}

			.content4_copy {
				border: 1rpx solid #333333;
				width: 60rpx;
				display: block;
				float: right;
				color: #333333;
				margin-left: 20rpx;
				text-align: center;
				font-size: 18rpx;
				// display: flex;
				// z-index: 999;
				
			}
		}

	}
	.border{
		
		border-bottom:1rpx solid #F0F0F0;
	}
	.emty {
		height: 60rpx;
		padding:20rpx 0;
		.order_btn{
			// margin-top: 10rpx;
			margin-right: 30rpx;
			width: 160rpx;
			height: 60rpx;
			background-color: #fff;
			display: block;
			float: right;
			border-radius: 50rpx;
			align-items: center;
			color: #AAAAAA;
			text-align: center;
			line-height: 60rpx;
			font-size: 24rpx;
			border: 1rpx solid #AAAAAA;
		}
		
	}

	.cut-off-rule {
		width: 100%;
		height: 10rpx;
		background-color: #F5F5F5;
	}
</style>
